<script setup>
import BasePopup from '@/components/BasePopup.vue'

const props = defineProps({
  // 对象形式为
  // {
  //   field: 'aa',
  //   columns: [{label: '', value: ''}],
  // }
  filterList: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['change'])

const filterState = reactive({
  fieldList: [],
  filterObject: {},
  columnsObject: {},
})

watch(
  () => props.filterList,
  (newVal) => {
    if (newVal.length) {
      filterState.fieldList = []
      filterState.filterObject = {}
      filterState.columnsObject = {}
      newVal.forEach((item) => {
        filterState.columnsObject[item.field] = item.columns
        filterState.filterObject[item.field] = item.columns[0]
        filterState.fieldList.push(item.field)
      })
      console.log('filterState', filterState)
    }
  },
  { immediate: true },
)

const popupState = reactive({
  visible: false,
  columns: [],
  currentValue: '',
  currentField: '',
})

const choseItem = (item) => {
  popupState.columns = filterState.columnsObject[item]
  popupState.currentValue = filterState.filterObject[item].value
  popupState.currentField = item
  console.log('popupState.columns', popupState)
  popupState.visible = true
}

const confirmFilter = () => {
  console.log('popupState.currentValue', popupState.currentValue)
  const fObject = popupState.columns.find(
    (item) => item.value === popupState.currentValue,
  )
  filterState.filterObject[popupState.currentField] = fObject
  emit('change', filterState.filterObject)
  popupState.visible = false
}
</script>

<template>
  <view class="filter-bar">
    <view
      v-for="item in filterState.fieldList"
      :key="item"
      class="filter-bar-item"
      @click="choseItem(item)"
    >
      <view class="filter-bar-item-text">
        {{ filterState.filterObject[item].label }}
      </view>
      <view class="filter-bar-item-icon">
        <image
          class="h-32rpx w-32rpx"
          src="/static/icons/filter-arrow.png"
        />
      </view>
    </view>
  </view>
  <BasePopup
    v-model:visible="popupState.visible"
    title="请选择"
  >
    <template #headerRight>
      <wd-button
        type="text"
        @click="confirmFilter"
      >
        确认
      </wd-button>
    </template>
    <wd-picker-view
      v-model="popupState.currentValue"
      :columns="popupState.columns"
    />
  </BasePopup>
</template>

<style lang="scss" scoped>
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16rpx;

  &-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 80rpx;

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1rpx;
      height: 32rpx;
      content: '';
      background-color: $uni-border-color;
      transform: translateY(-50%);
    }

    &:last-child {
      &::after {
        display: none;
      }
    }

    &-text {
      font-size: 28rpx;
      color: $uni-text-color;

      &.active {
        color: #f98f18;
      }
    }
  }
}
</style>
